{% extends 'base.html' %}
{% load static %}
{% load i18n %}
{% load  sizeformat %}

{% block head %}
    <link rel="stylesheet" type="text/css" href="{% static 'vms/vms_list.css' %}">
{% endblock %}
{% block title %}{% translate '本地资源设备列表' %}{% endblock %}

{% block boby %}
    <div class="container-fluid">
        <div class="card">
            <div class="card-header">
                <span class="card-title"><strong>{% translate '本地资源设备列表' %} ({{ count }})</strong></span>
{#                <span><a class="btn btn-sm btn-primary float-right" href="{% url 'vms:vm-create' %}">#}
{#                    创建虚拟机#}
{#                </a></span>#}
            </div>
            <div class="card-body">
                <form role="form" class="form-horizontal" method="get" action="">
                    <div class="input-group" style="">
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-center">{% translate '数据中心' %}</label>
                        </div>
                        <select name="center" class="custom-select" id="id-center">
                            <option value="">--</option>
                            {% for c in centers %}
                                <option value="{{ c.id }}" {% if c.id == center_id %}selected{% endif %}>
                                    {{ c.name }}
                                </option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-group">{% translate '主机组' %}</label>
                        </div>
                        <select name="group" class="custom-select" id="id-group">
                            <option value="">--</option>
                            {% for g in groups %}
                                <option value="{{ g.id }}" {% if g.id == group_id|add:0 %}
                                        selected {% endif %}>{{ g.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-host">{% translate '宿主机' %}</label>
                        </div>
                        <select name="host" class="custom-select" id="id-host">
                            <option value="">--</option>
                            {% for h in hosts %}
                                <option value="{{ h.id }}" {% if h.id == host_id|add:0 %}
                                        selected {% endif %}>{{ h.ipv4 }}</option>
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text" for="id-type">{% translate '资源类型' %}</label>
                        </div>
                        <select name="type" class="custom-select" id="id-type">
                            <option value="">--</option>
                            {% for val, name in types %}
                                {% if val != 0 %}
                                <option value="{{ val }}" {% if val == type_id %}selected {% endif %}>{{ name }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                        <div class="input-group-prepend">
                            <label class="input-group-text">{% translate '关键字' %}</label>
                        </div>
                        <input type="text" class="form-control" name="search" value="{{ search }}"
                               placeholder="{% translate '搜 IP地址、备注' %}"/>
                        <span class="input-group-text"></span>
                        <button type="submit" class="btn btn-primary form-control">{% translate '筛选' %}</button>
                    </div>
                </form>
            </div>
            <table class="table table-hover text-center table-pci-list" style="word-wrap:break-word;word-break:break-all;">
                <thead class="thead-light">
                <tr>
{#                    <th></th>#}
                    <th>ID</th>
                    <th>{% translate '资源类型' %}</th>
                    <th>{% translate '地址' %}</th>
                    <th>{% translate '宿主机' %}</th>
                    <th>{% translate '虚拟机' %}</th>
                    <th>{% translate '挂载时间' %}</th>
                    <th width="180px">{% translate '备注' %}</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for dev in devices %}
                    <tr id="tr_{{ vm.hex_uuid }}">
{#                        <td><input type="checkbox" class="item-checkbox" value="{{ dev.id }}" name="select_dev"></td>#}
                        <td>{{ dev.id }}</td>
                        <td>{{ dev.type_display }}</td>
                        <td>{{ dev.address }}</td>
                        <td>{{ dev.host.ipv4 }}</td>
                        {% if dev.vm %}
                            <td>{{ dev.vm.ipv4 }}</td>
                            <td>{{ dev.attach_time | date:'Y-m-d H:i:s' }}</td>
                        {% else %}
                            <td>{% translate '未挂载' %}</td>
                            <td>{% translate '无' %}</td>
                        {% endif %}
                        <td>{{ dev.remarks | default:'无' }}</td>
                        <td>
                            {% if dev.is_mounted %}
                                <button class="btn btn-sm btn-danger btn-pci-unmount" data-pci-id="{{ dev.id }}">{% translate '卸载' %}</button>
                            {% else %}
                                <a class="btn btn-sm btn-success" href="{% url 'device:pci-mount' pci_id=dev.id %}">{% translate '挂载' %}</a>
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {% with page_list=page_nav.page_list previous=page_nav.previous next=page_nav.next %}
                {% if page_list %}
                    <div class="card-footer">
                        <nav aria-label="Page navigation">
                            <ul class="pagination"  style="margin:0;">
                                {% if previous %}
                                    <li class="page-item"><a class="page-link" href="?{{ previous }}" aria-label="Previous"><span
                                            aria-hidden="true">&laquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&laquo;</span></li>
                                {% endif %}
                                {% for disp, query, active in page_list %}
                                    {% if active %}
                                        <li class="page-item active"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% else %}
                                        <li class="page-item"><a class="page-link" href="?{{ query }}">{{ disp }}</a></li>
                                    {% endif %}
                                {% endfor %}
                                {% if next %}
                                    <li class="page-item"><a class="page-link" href="?{{ next }}" aria-label="Next"><span
                                            aria-hidden="true">&raquo;</span></a></li>
                                {% else %}
                                    <li class="page-item disable"><span class="page-link" aria-hidden="true">&raquo;</span></li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                {% endif %}
            {% endwith %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="{% static 'evcloud/common.js' %}"></script>
    <script type="text/javascript" src="{% static 'device/pci_list.js' %}"></script>
{% endblock %}
